<template>
  <section class="m-4">
    <el-card>
      <section slot="header" class="flex items-center">
        <p>用户ID： </p>
        <el-input v-model="formData.user_code" class="mr-8"/>
        <p>用户昵称： </p>
        <el-input v-model="formData.nickname" class="mr-8"/>
        <p>申请时间： </p>
        <el-date-picker
          v-model="dateList"
          class="mr-8"
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          type="datetimerange"
        />
        <el-button type="primary" @click="initData()">搜索</el-button>
      </section>

      <el-table :data="tableData" border class="mx-4" stripe>
        <el-table-column label="用户ID" prop="user_id"/>
        <el-table-column label="用户昵称" prop="nickname"/>
        <el-table-column label="用户性别" prop="sex">
          <template slot-scope="{row}">
            <el-tag v-if="row.sex === 0" type="danger">未知</el-tag>
            <el-tag v-if="row.sex === 1" type="primary">男</el-tag>
            <el-tag v-if="row.sex === 2" type="warning">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布内容" prop="content"/>
        <el-table-column label="回复量" prop="reply_count"/>
        <el-table-column label="发布时间" prop="created_at"/>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button
              plain
              type="primary"
              @click="openDetail(row)"
            >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-size="15"
        :total="meta.total"
        background
        class="text-right mt-4"
        layout="prev, pager, next"
        @current-change="initData"
      />

    </el-card>
    <EVDetail ref="EVDetail"/>
  </section>
</template>

<script>
import EVDetail from '@/views/echoValley/record/EVDetail'
import request from '@/utils/request'
import { getDateListToBackend } from '@/utils'

export default {
  components: { EVDetail },
  data() {
    return {
      queryDate: '',
      tableData: [],
      dateList: undefined,

      formData: {
        user_code: '',
        nickname: '',
        date: ''
      },
      meta: {
        page: 1,
        total: 0
      }
    }
  },
  computed: {
    EVDetail() {
      return this.$refs.EVDetail
    }
  },
  created() {
    const queryDate = this.$route.query.date
    if (queryDate) {
      console.log(queryDate)
      const dayStart = new Date(queryDate)
      const dayEnd = new Date(queryDate)
      dayStart.setHours(0, 0, 0)
      dayEnd.setHours(23, 59, 59)
      this.dateList = [dayStart, dayEnd]
    }

    this.initData()
  },
  methods: {
    // 初始化数据
    async initData(page = 1) {
      try {
        if (this.dateList !== undefined && Array.isArray(this.dateList) && this.dateList.length > 0) {
          this.formData.date = getDateListToBackend(this.dateList)
        }

        const { data: { list, meta } } = await request({
          url: '/dandelion/seed',
          params: {
            ...this.formData,
            page
          }
        })
        this.tableData = list
        this.meta.page = meta.page
        this.meta.total = meta.total
      } catch (e) {
        console.error(e)
      }
    },
    // 打开详情
    async openDetail(row) {
      this.EVDetail.show(row)
    }
  }
}
</script>

<style scoped>
::v-deep .el-input {
  width : 200px;
}
</style>
